<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Test</title>
    <!-- import CSS -->
    <!-- <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    /> -->
    <link rel="stylesheet" type="text/css" href="./css/index.css" />
    <link rel="stylesheet" type="text/css" href="./css/element-ui-index.css" />
  </head>

  <body>
    <style>
      #app {
        width: 80vw;
        margin: 60px auto auto auto;
      }
    </style>
    <div id="app">
      <el-ul>
        <h2>遍历数组</h2>
        <el-li v-for="item in color">{{item}}&nbsp;&nbsp;</el-li>
        <br /><br />
        <el-li :key="item.id" v-for="(item,index) in myColors">
          <span>英文：{{item.ename}}</span>
          <br />
          <span>中文：{{item.cname}}</span>
          <br />
          <span>索引：{{index}}</span>
          <br />
        </el-li>
        <br />
        <h2>遍历对象</h2>
        <el-li v-for="(obj,k,i) in obj" :key="i">
          {{"属性值:" +obj+'--'+ " 键值:" +k+'--'+ " 索引:" +i}}
        </el-li>
      </el-ul>
      <div>
        <h2>遍历对象中的数组</h2>
        <el-li v-for="(v,i)in obj.myColors" :key="i">
          {{"属性值:" +v+'--'+ " 索引:" +i}}
        </el-li>
      </div>
    </div>
  </body>
  <!-- import Vue before Element -->
  <script src="js/vue.js"></script>
  <!-- import JavaScript -->
  <script src="js/element-ui-lib-index.js"></script>
  <!-- <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->
  <script>
    new Vue({
      el: "#app",
      data() {
        return {
          color: ["red", "blue", "yellow"],
          myColors: [
            {
              id: 1,
              ename: "red",
              cname: "红色",
            },
            {
              id: 2,
              ename: "blue",
              cname: "蓝色",
            },
            {
              id: 3,
              ename: "yellow",
              cname: "黄色",
            },
          ],
          obj: {
            name: "tom",
            gender: "男",

            myColors: [
              {
                id: 1,
                ename: "red",
                cname: "红色",
              },
              {
                id: 2,
                ename: "blue",
                cname: "蓝色",
              },
              {
                id: 3,
                ename: "yellow",
                cname: "黄色",
              },
            ],
          },
        };
      },
      methods: {},
    });
  </script>
</html>
